import { Button, Form, Input, message } from 'antd'
import './login.css'
import {
  UserOutlined,
  LockOutlined
} from '@ant-design/icons';
import ReactCanvasNest from 'react-canvas-nest'//引入粒子效果
import React from 'react'
import axios from 'axios';

function Login(props) {
  const onFinish = (values) => {
    // console.log(values);
    axios.get(`/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`).then((res)=>{
      // console.log("res",res.data);
      if(res.data.length === 0){
        message.error("用户名或密码不匹配！")
      }else{
        localStorage.setItem("token",JSON.stringify(res.data[0]));
        props.history.push('/')
      }
    }).catch((err)=>{
        console.log(err);
    })
  }
  return (
    <div style={{
      backgroundColor: "rgb(35,39,65)",
      height: "100%"
    }}>

      {/* 使用粒子效果 */}
      <ReactCanvasNest
        className='canvasNest'
        config={{
          pointColor: ' 255, 255, 255 ',
          lineColor: '255,255,255',
          pointOpacity: 0.5,
          pointR: 3,
          count: 160,
          follow:true
        }}
        style={{ zIndex: 1 }}
      />

      <div className='formBox'>
        <div className='title'>
          全球新闻发布管理系统
        </div>
        <Form
          name="basic"
          onFinish={onFinish}
          // onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input prefix={<UserOutlined />} placeholder='Username' />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your password!',
              },
            ]}
          >
            <Input.Password prefix={<LockOutlined />} placeholder='Password' />
          </Form.Item>


          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login


